<template>
  <z-publicFrame>
    <template #header>
      <el-page-header @back="goBack" content="修改">
      </el-page-header>
    </template>
    <template #container>
      <div class="formStyle">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item prop="name" label="角色名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item prop="detailInfo" label="角色详细">
            <el-input v-model="form.detailInfo"></el-input>
          </el-form-item>
          <el-form-item label="是否锁定" prop="available">
            <el-radio-group v-model="form.available">
              <el-radio :label="1">公开</el-radio>
              <el-radio :label="0">锁定</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="详细配置">
            <el-input type="textarea" v-model="form.roleConfig"/>
          </el-form-item>
          <div class="clearfix permission-block">
            <div class="menu-list">
              <GreenTitle>菜单</GreenTitle>
              <el-tree
                id="tree"
                :data="menus"
                show-checkbox
                default-expand-all
                node-key="id"
                ref="tree"
                :highlight-current="true"
                @check="handleCheckTree"
              >
              </el-tree>
            </div>
            <div class="api-list">
              <GreenTitle>接口</GreenTitle>

              <el-form-item id="form_select" label="">
                <el-checkbox-group v-model="form.apiCodes">
                  <el-checkbox :disabled="false" v-for="(item,index) in api_list" :key="index" :label="item.code" name="api_1">{{item.name + ':' + item.url}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>

            </div>
          </div>
          <el-form-item>
            <el-button type="primary" @click="handleUpdate">立即修改</el-button>
          </el-form-item>
        </el-form>

      </div>
    </template>
  </z-publicFrame>
</template>

<script>
import PublicFrame from '../../components/CrudTempalte/PublicFrame'

export default {
  name: 'add',
  components: {
    'z-publicFrame': PublicFrame
  },
  props: ['menus'],
  data() {
    return {
      api: {
        update: this.$api.role.update,
        detail: this.$api.role.detail,
        api_list: this.$api.api.all

      },
      rules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ]
      },
      form: {
        name: '',
        available: 1,
        detailInfo: null,
        roleConfig: null,
        apiCodes: [],
        menuCodes: [],
        code: null
      },
      api_list: []
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    handleUpdate() {
      this.$httpTemplate({ url: this.api.update, json: this.form })
    },
    handleDetail(code) {
      this.$httpTemplate({ url: this.api.detail, paras: { code: code } }, data => {
        this.$beanUtils.copyProperties(data.data.data.role, this.form)
        this.$refs.tree.setCheckedKeys(this.form.menuCodes)
      })
    },
    handleCheckTree() {
      this.form.menuCodes = this.$refs.tree.getCheckedKeys()
    },
    handleApilist() {
      this.$httpTemplate({ url: this.api.api_list }, data => {
        this.api_list = data.data.data.apiList
      })
    },
    handleStyle() {
      document.querySelector('#form_select').querySelector('div.el-form-item__content').style.margin = 0
    }
  },
  created() {
    const code = this.$route.query.code
    this.form.code = code

    this.handleDetail(code)
    this.handleApilist()
  },
  mounted() {
    this.handleStyle()
  }
}
</script>

<style scoped>
  .el-page-header {
    margin: 15px 0;
    overflow: hidden;
  }
  div.formStyle {
    margin-top: 30px;

  }
  .menu-list{
    float: left;
    width: 35%;
    height: 100%;

  }
  .api-list{
    overflow: visible;
    width: 35%;
    margin-left: 20px;
    float: left;
    height: 100%;
  }
  .permission-block {
    margin: 20px 20px;
    height: 300px;
  }
  #form_select,#tree {
    box-sizing: border-box;
    padding-right: 183px;
    height: 239px;
    overflow: auto;
  }

</style>
